<template>
	<div>
		<div class="container center banner">
			<img src="../../static/img/banner.png" alt="" class="img-responsive pc-bg">
			<img src="../../static/img/m-banner.png" alt="" class="img-responsive m-bg">
		</div>
		<div class="container center item-nav">
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
				<div class="pc-item-nav">
					<div class="pc-item-nav-tit">
						<label>学院概况</label>
						<span>/</span>
						<span>college overview</span>
					</div>
					<ul class="list-unstyled pc-item-nav-content">
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/sco_info"><span>学院简介</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/sco_dyn"><span>学院动态</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/co_construction"><span>集体建设</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/teacher"><span>师资力量</span></router-link></li>
						<li class="active"><i class="iconfont icon-arrows-8-2"></i><router-link to="/campus_tour"><span>校园风光</span></router-link></li>
					</ul>
					<div>
						<router-link to="special_major_accouting">
							<img src="../../static/img/pro_info.png" class="img-responsive" alt="专业介绍">
						</router-link>
					</div>
					<div>
						<router-link to="sign_online">
							<img src="../../static/img/sign.png" class="img-responsive" alt="在线报名">
						</router-link>
					</div>
					
				</div>
				<!-- mobail -->
				<div class="m-item-nav m-3">
					<div v-for="(item,index) in list"  @click="toggleTabs(index)" :class="{active:index==nowIndex}">
						<span class="text-center">{{item.type}}</span>
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 content">
				<div class="content-title bread-nav">
					<div class="content-left">
						<ul class="list-inline">
							<li v-for="(item,index) in list"  @click="toggleTabs(index)" :class="{active:index==nowIndex}">
								<span>{{item.type}}</span>
							</li>
						</ul>
					</div>
					<div class="content-right">
						<i class="iconfont icon-bofang"></i>
						<span><router-link to='/'>首页</router-link></span>
						<span>></span>
						<span><router-link to='/'>学院概况</router-link></span>
						<span>></span>
						<span><router-link to='/campus_tour'>校园风光</router-link></span>
					</div>
				</div>
				<!-- 0 -->
				<div class="tour-box" v-show="nowIndex===0">
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school1.png" class="img-responsive" alt="">
							<span>学院大门</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school2.png" class="img-responsive" alt="">
							<span>教学酒店</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school3.png" class="img-responsive" alt="">
							<span>西餐厅</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school4.png" class="img-responsive" alt="">
							<span>户外体育场</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school5.png" class="img-responsive" alt="">
							<span>食堂</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school6.png" class="img-responsive" alt="">
							<span>教学楼</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school7.png" class="img-responsive" alt="">
							<span>学生宿舍</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school8.png" class="img-responsive" alt="">
							<span>实训楼</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school9.png" class="img-responsive" alt="">
							<span>图书馆</span>
						</div>
					</div>
				</div>
				<!-- 1 -->
				<div class="tour-box" v-show="nowIndex===1">
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school10.png" class="img-responsive" alt="">
							<span>实训讲台</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school11.png" class="img-responsive" alt="">
							<span>实训室</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school12.png" class="img-responsive" alt="">
							<span>实训室</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school13.png" class="img-responsive" alt="">
							<span>实训室</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school14.png" class="img-responsive" alt="">
							<span>实训室</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school15.png" class="img-responsive" alt="">
							<span>实训室</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school16.png" class="img-responsive" alt="">
							<span>教师办公区</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school17.png" class="img-responsive" alt="">
							<span>阅读区</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school18.png" class="img-responsive" alt="">
							<span>阅读区</span>
						</div>
					</div>
				</div>
				<!-- 2 -->
				<div class="tour-box" v-show="nowIndex===2">
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school19.png" class="img-responsive" alt="">
							<span>阅读区</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school20.png" class="img-responsive" alt="">
							<span>咖啡吧</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school25.png" class="img-responsive" alt="">
							<span>体育馆</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school22.png" class="img-responsive" alt="">
							<span>学生就餐区</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school23.png" class="img-responsive" alt="">
							<span>学生取餐区</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school24.png" class="img-responsive" alt="">
							<span>学生宿舍</span>
						</div>
					</div>
				</div>
				<!-- 3 -->
				<div class="tour-box" v-show="nowIndex===3">
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school28.png" class="img-responsive" alt="">
							<span>扬州客运站</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school29.png" class="img-responsive" alt="">
							<span>扬州火车站</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school30.png" class="img-responsive" alt="">
							<span>扬州京华城</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school31.png" class="img-responsive" alt="">
							<span>瘦西湖</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school32.png" class="img-responsive" alt="">
							<span>东圈门</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
						<div>
							<img src="../../static/img/school33.png" class="img-responsive" alt="">
							<span>东关街</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return{
				list:[
					{
						type:"校园建设",
					},
					{
						type:"教学设备",
					},
					{
						type:"生活设施",
					},
					{
						type:"校园周边",
					}
					
				],
				nowIndex:0
			}
		},
		created:function(){
			
			document.title = "校园风光_扬州中瑞酒店职业学院互联网学院招生网";
		},
		methods:{
	        toggleTabs:function(index){
	            this.nowIndex=index;
	        }
	    }

	}
</script>